<template>
  <div class="container">
    <div class="header">
      <span class="iconfont">&#xe849;</span>
      猜你喜欢
    </div>
    <ul class="like-list">
      <router-link class="like-item border-bottom"
        :to="`/detail/${item.id}`"
        tag="li"
        v-for="item in likeItemList"
        :key="item.id">
        <div class="like-img-wrapper">
          <div class="img-container">
            <img class="like-img" :src="item.imgUrl" :alt="item.title">
          </div>
        </div>
        <div class="like-info">
          <div class="title">{{ item.title }}</div>
          <div class="rate">
            <span v-for="(n, index) in item.rating"
              :key="index"
              class="rate-star iconfont">
              &#xe86a;
            </span>
            <span class="comment">{{ item.commentsNum }}条评论</span>
          </div>
          <div class="desc">
            <p>
              <span class="price">
                ¥
                <em class="price-num">{{ item.price }}</em>
              </span>
              起
            </p>
            <span class="dist">{{ item.dist }}</span>
          </div>
        </div>
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HomeLikeItem',
  props: {
    likeItemList: Array
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/variables.styl'
  @import '~styles/mixins.styl'
  .container
    background #fff
    .header
      padding .2rem
      font-size .32rem
      .iconfont
        color #f2550b
    .like-list
      margin-left .24rem
      .like-item
        display flex
        width 100%
        padding .2rem 0
        .like-img-wrapper
          width 2rem
          .img-container
            width 100%
            height 0
            padding-bottom 100%
            .like-img
              width 100%
        .like-info
          overflow hidden
          flex 1
          position relative
          margin 0 .2rem
          color $grayTextColor
          .title
            line-height .44rem
            font-size .32rem
            margin-top .2rem
            color #333
            ellipsis()
          .rate
            height .34rem
            line-height .34rem
            margin-top .2rem
            font-size .24rem
            .rate-star
              display inline-block
              color $highlightTextColor
              font-size .24rem
              width .24rem
              height .24rem
              line-height .24rem
            .comment
              margin-left .2rem
          .desc
            display flex
            justify-content space-between
            position absolute
            bottom .2rem
            left 0
            right 0
            height .4rem
            line-height .4rem
            font-size .24rem
            .price
              color $highlightTextColor
              .price-num
                font-size .4rem
</style>
